<script>
export default {
  data() {
    return {
      ruleForm: {
        username: 'CnYuu',
        password: '1234'
      },
      rules: {
        username: [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        },
          {
            min: 5,
            max: 20,
            message: '长度在 5 到 20 个字符',
            trigger: 'blur'
          }
        ],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
          {
            min: 4,
            message: '长度至少 4 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    login() {
      // 先验证form表单是否满足验证规则，如果满足则调其中的方法
      // function(valid){.....} --> (valid)=>{....}
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          // 调用后端接口，来实现登录
          this.$http.post('systemuser/login',this.ruleForm)
              .then(res=>{
                if(res.data.status==200){
                  // 消息提示
                  this.$message({
                    showClose: true,
                    message: res.data.message,
                    type: 'success'
                  });
                  // 获取返回的数据，并保存到本地用于后面的使用
                  sessionStorage.setItem('username',res.data.data.username)
                  sessionStorage.setItem('userid',res.data.data.id)
                  sessionStorage.setItem('img',res.data.data.img)
                  // 跳转页面
                  this.$router.push('/main/home')
                  // 跳转页面
                  //this.$router.push('/main')
                }else{
                  this.$message({
                    showClose: true,
                    message: res.data.message,
                    type: 'error'
                  });
                }
              })
        } else {
          this.$message({
            showClose: true,
            message: '请输入正确的账号和密码！',
            type: 'error'
          });
          return false;
        }
      });
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields();
    }
  }

}
</script>

<template>
  <div class="login">
    <video autoplay loop muted  class="video">
      <source src="@/resourse/mushroom.mp4" type="video/mp4">
    </video>

    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <div class="title">十方智育</div>
      <el-form-item label="账号" prop="username">
        <el-input  class="el-input-login" v-model="ruleForm.username" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input  class="el-input-login" type="password" v-model="ruleForm.password"></el-input>
      </el-form-item>

      <div class="submit">
        <el-button @click="login()">登 录</el-button>
        <br>
        <el-button @click="resetForm()">重 置</el-button>
      </div>

    </el-form>


  </div>
</template>

<style scoped>
.el-input-login{
  width: 200px;
  height: 28px;
  line-height: 28px;
}
button:nth-child(1){
  width: 240px;
  height: 38px;
  border: none;
  border-radius: 12px;
  margin: 10px;
  background: #42b983aa;
  transition: all 0.2s ease-in, color 0.2s ease-in;
  opacity: .85;
  color: #ffffffaa;
  font-size: 12px;
  font-weight: bolder;
}
button:nth-child(3){
  width: 240px;
  height: 38px;
  border: none;
  border-radius: 12px;
  margin: 10px;
  background: #D1E9F6aa;
  transition: all 0.2s ease-in, color 0.2s ease-in;
  opacity: .85;
  color: #3C3D37aa;
  font-size: 12px;
  font-weight: bolder;
}
.submit{
  margin-top: 48px;
  width: 380px;
  height: 100px;
  text-align: center;
}
button:nth-child(1):hover{
  transform: scale(1.02);
  background: #42b983;
  color: white; /* 修改按钮文本颜色以提高对比度 */
}
button:nth-child(3):hover{
  transform: scale(1.02);
  background: #D1E9F6;
  color: #3C3D37; /* 修改按钮文本颜色以提高对比度 */
}

.title{
  line-height: 60px;
  width: 380px;
  height: 100px;
  font-size: 32px;
  font-weight: bolder;
  color: #ffffffaa;
  margin-bottom: 32px;
}
.el-input-login{
  opacity: .32;
}
.demo-ruleForm{
  padding-top: 128px;
  padding-right: 68px;
  box-sizing: border-box;
  text-align: center;
  position: absolute;
  right: 0;
  top:0;
  width: 380px;
  height: 100vh;
  background: #FFFFFF22;
}
.video{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1; /* 确保背景视频在内容后面 */
}
</style>